<template>
    <div class="push-low-wrap">
        <div class="push-low-title">
                <el-input placeholder="请输入内容" v-model="pushLowKeyword" @keyup.enter.native="searchSch">
                    <el-button slot="append" icon="el-icon-search" @click="searchSch"></el-button>
                </el-input>
            </div>
            <div class="push-low-box">
                <div class="push-low-box-l">
                    <el-collapse v-model="pushLowNames">
                        <el-collapse-item title="学校" name="1">
                            <ul>
                                <li v-for="(school,schoolInx) in schoolList" :key="schoolInx" v-if="school.server_type === 1" v-text="school.name" @click="selSch(school)"></li>
                            </ul>
                        </el-collapse-item>
                        <el-collapse-item title="教育局" name="2">
                            <ul>
                                <li v-for="(school,schoolInx) in schoolList" :key="schoolInx" v-if="school.server_type === 2" v-text="school.name" @click="selSch(school)"></li>
                            </ul>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="push-low-box-r">
                    <ul class="list-head">
                        <li></li>
                        <li>序号</li>
                        <li>学校/教育局名称</li>
                    </ul>
                    <ul v-for="(sch,schInx) in selSchoolList" :key="schInx">
                        <li><i class="el-icon-close" @click="delSch(schInx)"></i></li>
                        <li v-text="schInx+1"></li>
                        <li v-text="sch.name"></li>
                    </ul>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    /**
     * 为了不残留数据，在父组件引用这个组件时，使用v-if，来重新载入组件，重复执行created
     */
    data() {
        return {
            pushLowKeyword: "" /*关键词 */,
            pushLowNames: ["1", "2"],
            schoolList: [] /*学校列表 */,
            selSchoolList: [],
            tempList: [],
        };
    },
    created() {
        this.getNextList();
    },
    methods: {
    getNextList() {/*获取当前用户所能推送的下级*/
		let params = {
			server_type: '',
			type: 1,
		}
		const success=res=> {
            this.schoolList = deep_clone(res.data);
            this.tempList = deep_clone(res.data);
		}
        this.$ajax.get('api/level/get_user_can_check_next',{params: params,func:{success:success}})
	},
    searchSch() {
        let queryString = this.pushLowKeyword;
        let restaurants = this.tempList;

        this.schoolList = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    },
    createStateFilter(queryString) {
        return state => {
            return (
            state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
            );
        };
    },
    selSch(data) {
        if (this.selSchoolList.length > 0) {
            let flag = true;
            this.selSchoolList.forEach((item, inx) => {
            if (item.name === data.name) {
                flag = false;
            }
            });
            if (flag) {
            this.selSchoolList.push(data);
            }
        } else {
            this.selSchoolList.push(data);
        }
        this.$emit('listenPushLow',this.selSchoolList)
        },
        delSch(schInx) {
            this.selSchoolList.splice(schInx, 1);
            this.$emit('listenPushLow',this.selSchoolList)
        }
    }
};
</script>
<style lang="scss">
.push-low-wrap {
    .push-low-title {
        width: 220px;
        margin-bottom: 15px;
    }
    .push-low-box {
        display: flex;
        .push-low-box-l {
            flex: 0 0 220px;
            margin-right: 10px;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            max-height: 400px;
            overflow: hidden;
            overflow-y: auto;
            .el-collapse {
                padding: 0 10px;
                li {
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        background: #ddd;
                    }
                }
            }
        }
        .push-low-box-r {
            flex: 1;
            border: 1px solid #ebeef5;
            max-height: 400px;
            overflow: hidden;
            overflow-y: auto;
            .list-head {
                height: 48px;
                line-height: 48px;
            }
            ul {
                display: flex;
                li {
                    text-align: center;
                    &:first-child {
                        flex: 0 0 50px;
                    }
                    &:nth-of-type(2) {
                        flex: 0 0 50px;
                    }
                    &:nth-of-type(3) {
                        flex: 1;
                    }
                }
                .el-icon-close {
                    color: #f56c6c;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
